<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE HTML>
<html lang="en">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/main.css">
<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/js/main.js"></script>
<title>商城管理系统</title>
<style>
.main_div {
	min-width: 1000px
}

.center {
	width: 200px;
	height: 100px;
	background-color: #ccc;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -50px;
	z-index: 10;
	text-align: center;
	line-height: 50px;
	border-radius: 6px;
}

.addDetailsImg {
	font-size: 40px;
	background-color: #FF6C29;
	padding: 0 20px;
	line-height: 22px;
	height: 26px;
	display: inline-block;
	right: 45px;
	color: #fff;
	position: absolute;
	top: 0;
}
</style>
</head>
<body>
	<%@ include file="header.jsp"%>
	<%@ include file="left.jsp"%>
	<div id="index"
		style="position: absolute;left: 180px;top: 80px;bottom: 0;right: 0;">
		<section id="motai">
			<div class="scrollbar1-1" id="style1-1">
				<div class="main_div" style="height: 560px;">
					<div class="main_title">
						<span>添加直营商品</span>
					</div>
					<form class="form-horizontal" enctype="multipart/form-data"
						style="margin-top: 30px" id="uploadForm">
						<input style="display:none" name="directId" value="1" />
						<div class="form-group">
							<label class="col-xs-2 control-label">商品类型：</label>
							<div class="col-xs-3">
								<select id="classifyId" class="form-control" name="classify">

								</select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">商品是否推销：</label>
							<div class="col-xs-3">
								<select id="types" class="form-control" name="type">
									<option value="-1">请选择</option>
									<option value="0">普通商品</option>
									<option value="1">首页爆款</option>
								</select>
							</div>
						</div>
						<!--	<div class="form-group">
							<label class="col-xs-2 control-label">所属商家：</label>
							<div class="col-xs-3">
								<select id="selectSuper" class="form-control" name="directId">
									<option value="-1">请选择</option>
								</select>
							</div>
						</div>-->
						<div class="form-group">
							<label class="col-xs-2 control-label">商品名称：</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" id="productName"
									name="productName" placeholder="商品名称">
							</div>
						</div>

						<div class="form-group">
							<label class="col-xs-2 control-label">商品规格：</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" id="specification"
									name="specification" placeholder="商品规格">
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">原价：</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" id="retailPrice"
									name="retailPrice" placeholder="请输入商品原价">
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">推销价：</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" id="hotPrice"
									maxlength="6" name="hotPrice" placeholder="请输入商品推销价">
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">销量：</label>
							<div class="col-xs-3">
								<input type="text" class="form-control" id="sales" maxlength="6"
									name="sales" placeholder="请输入商品销量">
							</div>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">分销金额百分比：</label>
							<div class="col-xs-3">
								<input class="form-control" id="profit" maxlength="6" value="0"
									name="profit" placeholder="请输入分销金额百分比">
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">%</label>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">商品略缩图：</label>
							<div class="col-xs-3">
								<input type="file" id="thumbnailFile" name="thumbnailFile"
									onchange="selectImage(this);" /> <img id="image"
									style="width:125px;height:95px" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传略缩图（建议大小为125px*95px像素）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">商品广告图：</label>
							<div class="col-xs-3">
								<input type="file" id="adFile" name="adFile"
									onchange="selectImage2(this);"> <img id="image2"
									style="width:355px;height:165px" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品banner图片（建议大小为355*165像素）</label>
						</div>
						<div class="form-group addDetailsWarp">
							<label class="col-xs-2 control-label">商品详情图片：</label>
							<div class="col-xs-3">
								<input type="file" id="detailsFile" name="detailsFile"
									onchange="selectImage3(this);"> <span
									class="addDetailsImg" id="addDetailsImg">+</span> <img
									id="image3" style="width:345px;" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品详情图片（建议宽度大小为345像素）</label>
						</div>


						<div class="form-group" id="goodsIntroduction">
							<label class="col-xs-2 control-label">商品介绍图1：</label>
							<div class="col-xs-3">
								<input type="file" id="introduce1File" name="introduce1File"
									onchange="selectImage4(this);"> <img id="image4"
									style="width:375px;height:300px" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品介绍图片（建议图片大小为375*300像素）</label>
						</div>
						<script>
							var i = 2;
							$(".form-horizontal").on("click", "#addDetailsImg", function() {
								var DetailsImg = '<div class="form-group addDetailsWarp"><label class="col-xs-2 control-label">商品详情图片'+i+'：</label><div class="col-xs-3"><input type="file" id="detailsFile" name="detailsFile' + i + '" onchange="selectImage3' + i + '(this);"> <span class="addDetailsImg" id="addDetailsImg">+</span><img id="image3' + i + '" style="width:345px;" src="" /> </div><label class="col-xs-5 control-label"style="text-align: left;color: #ff6c29">*必须上传商品详情图片（建议宽度大小为345像素）</label></div>';
						
								if ($(".form-horizontal").find(".addDetailsWarp").length == 10) {
									$(".form-horizontal").find(".addDetailsWarp").eq(9).find("#addDetailsImg").remove();
								} else {
									$(this).remove();
									$("#goodsIntroduction").before(DetailsImg);
								}
								i += 1;
								console.log($(".form-horizontal").find(".addDetailsWarp").length);
							});
						</script>
						<div class="form-group">
							<label class="col-xs-2 control-label">商品介绍图2：</label>
							<div class="col-xs-3">
								<input type="file" id="introduce2File" name="introduce2File"
									onchange="selectImage5(this);"> <img id="image5"
									style="width:375px;height:300px" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品介绍图片（建议图片大小为375*300像素）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">商品介绍图3：</label>
							<div class="col-xs-3">
								<input type="file" id="introduce3File" name=introduce3File
									onchange="selectImage6(this);"> <img id="image6"
									style="width:375px;height:300px" src="" />
							</div>
							<label class="col-xs-5 control-label"
								style="text-align: left;color: #ff6c29">*必须上传商品介绍图片（建议图片大小为375*300像素）</label>
						</div>
						<div class="form-group">
							<label class="col-xs-2 control-label">购买须知：</label>
							<div class="col-xs-4">
								<textarea class="col-xs-12" rows="5" id="details" name="details"></textarea>
							</div>

						</div>

						<div class="col-xs-4 col-xs-offset-2">
							<button id="setButton" class="col-xs-4 btn btn-primary"
								type="button">提交审核</button>
						</div>

					</form>
				</div>
			</div>
		</section>
	</div>
	<script>
		var image = '';
		function selectImage(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage2(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image2').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage3(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image3').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage32(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image32').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage33(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image33').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage34(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image34').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage35(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image35').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage36(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image36').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage37(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image37').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage38(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image38').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage39(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image39').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage310(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image310').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage4(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image4').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage5(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image5').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		function selectImage6(file) { //显示图片
			if (!file.files || !file.files[0]) {
				return;
			}
			var reader = new FileReader();
			reader.onload = function(evt) {
				document.getElementById('image6').src = evt.target.result;
				image = evt.target.result;
			};
			reader.readAsDataURL(file.files[0]);
		}
		$(function() {
			$("#setButton").click(function() {
				if ($("#productName").val().length > 30) {
					alert("商品名称长度不能大于30");
					return;
				}
				/*	var index = $("#profit").val().indexOf(".")
					if (index > 0) {
						alert("分销比例不能包含小数点");
						return;
					}*/
				/*if ($("#profit").val() > 99 || $("#profit").val() < 1) {
					alert("请输入正确的分销比例");
				
					return;
				}*/
				var allinput = $("#uploadForm").find("input");
				var config = true;
				for (var i = 0; i < allinput.length; i++) {
					if (allinput[i].value) {
					} else {
						config = false;
					}
				}
				if ($("#types").find("option:selected").val() == -1) {
					alert("请选择商品是否推荐")
					return;
				}
				if ($("#selectSuper").find("option:selected").val() == -1) {
					alert("请选择所属商家")
					return;
				}
				if ($("#classifyId").find("option:selected").val() == 0) {
					alert("请选择商品种类")
					return;
				}
				if (config) {
					/********************用于判断图片大小以及图片名称是否合法******************/
					var aarr = document.getElementsByTagName("input");
					var barr = [];
					var picreg = /^[A-Za-z0-9\._]{1,100}$/; //图片名称正则
					var flag1 = false; //用于判断图片大小
					var flag2 = false; //用于判断图片名称
					for (var i = 0; i < aarr.length; i++) {
						if (aarr[i].type == "file") {
							barr.push(aarr[i])
						}
					}
					for (var z = 0; z < barr.length; z++) {
						if (barr[z].files[0].size > 512000) { //判断图片大小是否大于500kb
							flag1 = true;
						}
					/*if (!picreg.test(barr[z].files[0].name)) { //判断图片名称
						flag2 = true;
					}*/
					}
					if (flag1) {
						alert("上传图片不得超过500kb每张");
						return;
					}
					if (flag2) {
						alert("图片名称只能由字母与数字组成");
						return;
					}
					/******************用于判断图片大小以及图片名称是否合法****************/
					$.ajax({
						url : urls + "directAction/insertDirectProduct",
						type : 'POST',
						cache : false,
						data : new FormData($('#uploadForm')[0]),
						processData : false,
						contentType : false
					}).done(function(res) {
						console.log(res)
						if (res == true) {
							alert("提交成功")
						} else if (res == 251) {
							alert("该商品名称已存在，请勿重复提交")
						} else if (res == false) {
							alert("提交失败")
						}
					}).fail(function(res) {
						alert("服务器异常")
					});
				} else {
					alert("请填写完整信息")
				}
			})
		})
	
	
		$(function() {
			$.post(urls + "superMarketAction/getAllSuperMarketInfo", {
				pageNum : 1,
				pageCount : 2000
			}, function(res) {
				console.log(res);
				if (res) {
					$.each(res.list, function(n, superInfo) {
						console.log(superInfo.id);
						$("#selectSuper").append("<option value=" + superInfo.id + ">" + superInfo.name + "</option>");
					})
				}
			})
		});
	</script>
</body>
</html>